<style>

</style>


<template>

  <div class="auditSettled">
    <h3 style="margin-top: 10px;margin-bottom: 10px"><i class="el-icon-document-copy" style="margin-right: 10px"></i>店铺审核和详情
    </h3>
    <div style="display: flex;height: 170px;padding: 0.5%;background-color: #EFF2FC">
      <div style="width: 29%;padding-left: 80px">
        <img v-show="auditSettled.status==1" src="https://spyx-yy.oss-cn-beijing.aliyuncs.com/2024/11/01/%E5%BE%85%E5%AE%A1%E6%A0%B8" height="155px">
<!--        <img v-show="auditSettled.status==2" src="https://spyx-yy.oss-cn-beijing.aliyuncs.com/2024/11/07/%E5%AE%A1%E6%A0%B8%E4%B8%AD" height="155px">-->
        <img v-show="auditSettled.status==3" src="https://spyx-yy.oss-cn-beijing.aliyuncs.com/2024/11/07/%E5%AE%A1%E6%A0%B8%E9%80%9A%E8%BF%87" height="155px">
        <div v-show="auditSettled.status==4" style="margin-top: 53px;margin-left: 40px">
          <font size="6px">审核未通过</font>
        </div>
      </div>
      <div style="width: 69%;padding-top: 15px">
        <div>
          <div style="display: grid;grid-template-columns: repeat(3, 1fr);height: 50px">
            <div>店铺ID：{{ settled.id }}</div>
            <div>详细地址：{{ settled.detailed}}</div>
            <div>接单手机号：{{ settled.tel}}</div>
          </div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr);height: 50px">
          <div>店铺名称：{{ settled.name }}</div>
          <div>负责人：{{ settled.responsiblePerson }}</div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr);height: 50px">
          <div>所在地：{{ settled.address }}</div>
          <div>联系手机号：{{ settled.tel }}</div>
        </div>
      </div>
    </div>

    <h4 style="margin-top: 20px">审核内容</h4>
    <div style="display: flex;margin-top: 10px;width: 100%; ">
      <div style="width: 32%;padding-top: 20px;margin-right:10px;padding-left: 20px">
        <p style="margin-bottom: 30px">流水号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ auditSettled.serialNumber }}</p>
        <p style="margin-bottom: 30px">审核类型：&nbsp;&nbsp;&nbsp;{{ auditSettled.type == 1 ? '店铺LOGO' : auditSettled.type == 2 ? '经营品类' :auditSettled.type == 3 ? '店铺门面图' : auditSettled.type == 4 ? '店铺环境图片' :auditSettled.type == 5 ? '店铺名称' :auditSettled.type == 6 ? '店铺广告' :auditSettled.type == 7 ? '外卖店招' :'团购店招'}}</p>
        <p style="margin-bottom: 30px">新信息：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{auditSettled.newInformation }}</p>
        <p style="margin-bottom: 30px">旧信息：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ auditSettled.oldInformation }}</p>
        <p style="margin-bottom: 30px">提交时间：&nbsp;&nbsp;&nbsp;{{ auditSettled.submissionTime }}</p>
      </div>
    </div>



    <div>
      <el-card  style="margin-top: 20px;border-color: white;box-shadow: none">
        <div slot="header" class="clearfix">
          <span>审核意见</span>
        </div>
        <el-form ref="form" :model="auditSettled" label-width="120px">
          <el-form-item label="当前审核人：">
            <el-input v-model="user.username" style="width: 300px;" disabled></el-input>
          </el-form-item>
          <el-form-item label="审核结果：">
            <el-radio-group v-model="auditSettled.outcome">
              <el-radio label="同意">同意</el-radio>
              <el-radio label="拒绝">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="auditSettled.outcome === '拒绝'" label="拒绝原因：">
              <el-select v-model="auditSettled.refuse" placeholder="请选择原因">
              <el-option label="全部" value=""></el-option>
              <el-option label="原因1" value="1"></el-option>
              <el-option label="原因2" value="2"></el-option>
              <!-- 添加更多拒绝原因选项 -->
            </el-select>
          </el-form-item>
          <el-form-item label="补充说明：">
            <el-input style="width: 70%;" v-model="auditSettled.supplement"
                      placeholder="请输入补充说明"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>

</template>


<script>

export default {
  data() {
    return {
      user: {username: "张三"},
      auditSettled:{},
      settled:{},
    }
  },
  methods: {
    //   获取审核信息的方法
    findAllAudit(){
      var item1 = localStorage.getItem("settled");
      this.auditSettled = JSON.parse(item1);
    },


    // 获取整个店铺信息
    findAllSettled(){
      this.axios.get(`http://localhost:8000/xm-client/xm-settled/findSettledById?id=${this.auditSettled.bid}`).then(res=>{
        this.settled = res.data.data;
      })
    },


    //   修改状态的方法
    submitForm(){
      if(this.auditSettled.outcome=="同意"){
        this.auditSettled.status=3;
      }else if (this.auditSettled.outcome=="拒绝"){
        if(this.auditSettled.refuse==null){
          this.$message({
            message: '请选择拒绝原因',
            type: 'warning'
          });
          return;
        }
        this.auditSettled.status=4;
      }
      this.axios.post(`http://localhost:8000/xm-client/xm-auditbusiness/updateAudit`,this.auditSettled).then(res=>{
        if(res.data.code==200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
        this.$router.push({path:'/shops'});
      })
    },


    //   取消方法
    cancel(){
      this.$router.push({path:'/shops'});
    },
  },

  created() {
    this.findAllAudit();
    this.findAllSettled();
  },
}
</script>